<template>
  <div
    class="myPlayer"
    :style="'width:' + size * 100 + 'vw; height:' + size * 100 + 'vh'"
  >
    <!--<input type="button" value="show/hide" v-on:click="toggle()"> <br />-->
    <!--<input v-model="message" placeholder="edit seconds">-->
    <!--<p>Seconds is: {{ message }}</p>-->
    <!--<input type="button" value="jump" v-on:click="jumpToTime(50)"> <br />-->

    <video-player
      ref="videoPlayer"
      class="video-player-box"
      :options="playerOptions"
      :playsinline="true"
      custom-event-name="customstatechangedeventname"
      @play="onPlayerPlay($event)"
      @pause="onPlayerPause($event)"
      @ended="onPlayerEnded($event)"
      @waiting="onPlayerWaiting($event)"
      @playing="onPlayerPlaying($event)"
      @loadeddata="onPlayerLoadeddata($event)"
      @timeupdate="onPlayerTimeupdate($event)"
      @canplay="onPlayerCanplay($event)"
      @canplaythrough="onPlayerCanplaythrough($event)"
      @statechanged="playerStateChanged($event)"
      @ready="playerReadied($event)"
    >
    </video-player>
    <!-- <img class="backgroundImg" style="width:2040px;height:1050px;" src="../../static/pic/title.png" /> -->
    <!-- <interaction-layer></interaction-layer> -->
    <!-- <div class="left-score">0</div>
  <div class="middle-score">:</div>
  <div class="right-score">{{rightScoreNow}}</div> -->
  </div>
</template>

<script>
// Similarly, you can also introduce the plugin resource pack you want to use within the component
// import 'some-videojs-plugin'
export default {
  name: 'MyVideoPlayer',
  props: {
    autoPlay: {
      type: Boolean,
      default: false,
    },
    sourceType: {
      type: String,
      default: '',
    },
    size: {
      type: Number,
      default: 0,
    },
    hasControlBar: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      videoPlay: true,
      playerOptions: {
        // videojs options
        autoplay: this.autoPlay,
        loop: true,
        // fluid: true,
        muted: false,
        language: 'en',
        playbackRates: [0.7, 1, 1.5, 2],
        sources: [
          {
            type: 'video/mp4',
            src: this.sourceType,
          },
        ],
        // poster: '/static/video/football.jpg',
        controlBar: this.hasControlBar
          ? {
              // 配置控制栏
              timeDivider: true, // 时间分割线
              durationDisplay: true, // 总时间
              progressControl: true, // 进度条
              customControlSpacer: true, // 未知
              fullscreenToggle: true, // 全屏
            }
          : false,
      },
    }
  },
  computed: {
    player() {
      return this.$refs.videoPlayer.player
    },
  },
  mounted() {
    // console.log('this is current player instance object', this.player)
    // console.log(this.autoPlay)
    const height = '100%'
    const videoResize = () => {
      const elements = document.querySelectorAll('.video-js')
      elements.forEach((element) => {
        element.style.height = `${height}px`
      })
      const wrap = document.querySelector('#video-wrap')
      if (wrap !== null) {
        wrap.style.height = `${height}px`
        let stackedHeight = 60 + height
        const nextElement1 = document.querySelector('#envir-wrap')
        nextElement1.style.top = `${stackedHeight}px`
        stackedHeight += 800
        const nextElement2 = document.querySelector('#show-wrap')
        nextElement2.style.top = `${stackedHeight}px`
        stackedHeight += 1000
        const nextElement3 = document.querySelector('#job-wrap')
        nextElement3.style.top = `${stackedHeight}px`
        stackedHeight += 1600
        const nextElement4 = document.querySelector('#map-wrap')
        nextElement4.style.top = `${stackedHeight}px`
        stackedHeight += 557
        // const joinHeight = stackedHeight + 180
        const nextElement5 = document.querySelector('#join-root')
        nextElement5.style.height = `${stackedHeight}px`
      }
    }
    window.addEventListener('resize', videoResize)
    // videoResize()
  },
  methods: {
    // listen event
    onPlayerPlay() {
      this.videoPlay = true
      // 更新比分
    },
    onPlayerPause() {
      this.videoPlay = false
    },
    onPlayerEnded() {},
    onPlayerWaiting() {},
    onPlayerPlaying() {},
    onPlayerLoadeddata() {},
    onPlayerTimeupdate() {},
    onPlayerCanplay() {},
    onPlayerCanplaythrough() {},
    // ...player event

    // or listen state event
    playerStateChanged() {},

    // player is ready
    playerReadied() {
      // you can use it to do something...
      // player.[methods]
    },

    // 自定义函数
    // toggle:function(){
    //   this.isShow = !this.isShow;
    // },

    jumpToTime() {},
  },
}
</script>

<style lang="less">
.vjs-control-bar {
  margin-bottom: 80px;
  z-index: 1000;
}

.vjs-big-play-button {
  /* z-index: 999; */
  display: none;
  margin: -21% -6%;
  opacity: 0;
}

.video-player,
.video-js {
  height: 100%;
  width: 100%;
}

.vjs-control-bar {
  background-color: rgba(0, 0, 0, 0.7) !important;
  margin-bottom: 0;
}
</style>
